<template>
    <div id="panoramaConianer"></div>
    <div class="panoramaClose" @click="changePanorama">关闭</div>
</template>
<script>
import {
    defineComponent,
    getCurrentInstance,
    onMounted,
    ref,
    onBeforeUnmount,
    nextTick,
    watch,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
    setup() {
        const store = useStore();
        const changePanorama = () => {
            store.commit("changePanoramaStatus", false);
        };
        onBeforeUnmount(() => {});
        let opt, tp;
        onMounted(() => {
            //nextTick(()=>{
            if (tp) {
            }
            opt = {
                container: "panoramaConianer", //容器
                url: `https://59.212.147.69:8889/panoramagram/${store.state.currentPanoramaImg}.jpg`,
                width: "1920px", //指定宽度，高度自适应
                // lables:[
                //     {position:{lon:-163.44,lat:-7.92},logoUrl:'',text:'蓝窗户'},
                //     {position:{lon:114.12,lat:69.48},logoUrl:'',text:'一片云彩'},
                //     {position:{lon:-94.32,lat:-4.24},logoUrl:'',text:'大海'}
                // ],
                widthSegments: 60, //水平切段数
                heightSegments: 40, //垂直切段数（值小粗糙速度快，值大精细速度慢）
                pRadius: 1000, //全景球的半径，推荐使用默认值
                minFocalLength: 10, //镜头最a小拉近距离
                maxFocalLength: 10, //镜头最大拉近距离
                showlable: "show", // show,click
            };
            tp = new tpanorama(opt);
            tp.clean();
            tp.init();
            console.log(tp);
            //})
        });
        return {
            changePanorama,
        };
    },
});
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    #panoramaConianer {
        overflow: hidden;
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        z-index: 100000;
        background: #000;
    }

    .panoramaClose {
        position: absolute;
        right: vw(20);
        top: vh(20);
        cursor: pointer;
        color: #00EAFF;
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    #panoramaConianer {
        overflow: hidden;
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 100000;
        background: #000;
    }

    .panoramaClose {
        position: absolute;
        right: vw(40);
        top: vh(40);
        cursor: pointer;
        color: #00EAFF;
    }
}
</style>